<template>
	<view class="order">
		<!-- tab 栏 -->
		<view class="tabBox" style="display: flex;justify-content: space-between;background-color: #fff;padding-left: 10rpx;">
			<view class="chooseCup" style="color: #222222 !important;margin: 30rpx !important;display: flex;" @click="show = true">
				<text>{{beginTime == '' ? "日期筛选": beginTime}}</text>
				 <!-- <u-datetime-picker
					:show="show"
					v-model="beginTime"
					mode="year-month"
					@confirm="openCup"
				></u-datetime-picker> -->
				<u-picker mode="time" v-model="show" :params="params" @confirm="openCup" :default-time="nowTime" ></u-picker>
				<image src="@/static/shop/c.png" mode=""></image>
			</view>
			<view class="chooseCup" style="color: #222222 !important;margin: 30rpx !important;display: flex;">
				<vvSelect :list="allType" label="name" valueKey="id"
					:valueIndex="valueIndex" placeholder="类型筛选"
					ref="vvSelect" @change="tabChange()"></vvSelect>
				<image src="@/static/shop/c.png" mode=""></image>
			</view>
		</view>
		<!-- 列表 -->
		<view class="listBox">
			
			<view class="list" v-for="(item,index) in list" :key="index" >
				<!-- <view class="" style="display: flex;justify-content: space-between;">
					<view class="code">
						条码：{{1234567859}}
					</view>
					<view class="code" style="color: #FF3E3E;">{{item.status == 0 ? '未付款' : '已支付' }}</view>
				</view> -->
				
				<view class="list_t flex-r-b-c">
					<view class="list_t_r">
						<view class="list_t_r_t flex-r-b-c">
							<view class="name">提现金额：{{item.withdrawalPrice}}</view>
							<view class="name" style="margin-right: 40rpx;font-weight: 400;">{{item.state == 1 ?'申请中':(item.state == 2 ?'申请通过':'申请拒绝')}}</view>
							<!-- 0=未付款,1=已支付,2=待接单,3=制作中,4=待配送,5=配送中,6=已送达,7=已完成,8=用户取消,9=商家取消,10=支付失败,11=已过期,12商品已回购，13商家取消 -->
							<!-- <view class="state">{{item.status == 0 ? '未付款' : item.status == 1 ? '已支付' : item.status == 2 ? '待接单' : item.status == 3 ? '制作中' : item.status == 4 ? '待配送' : item.status == 5 ? '配送中' : item.status == 6 ? '已送达' : item.status == 7 ? '已完成' : item.status == 8 ? '用户取消' : item.status == 9 ? '商家取消' : item.status == 10 ? '支付失败':item.status == 11 ?  '已过期':item.status == 12 ?  '商品已回购': '商家取消'}}</view> -->
						</view>
						<view class="" style="display: flex;justify-content: space-between;">
							<view class="specifications">提现方式：{{item.withdrawalSource == 'POINT'?'积分':'佣金'}}</view>
							<view class="specifications">提现时间：{{item.createTime||''}}</view>
						</view>
						
					</view>
				</view>
				<!-- <view class="list_b flex-r-b-c">
					<view class="time">{{item.order_time}}</view>
					<view class="text">合计：<view class="money">¥{{item.actual_price}}</view></view>
				</view> -->
				
				<!-- <view class="btnBox flex-r-s-c" v-if="item.is_huigou == 1 && item.status == 1">
					<view class="btn" @tap.stop="buyBack(item)" >回购</view>
					<view class="btn" style="margin-right: 30rpx;" @tap.stop="pickUpGoods(item)">提货</view>
				</view> -->
				
			</view>
			
			<!-- 提示栏 -->
			<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view>
			
		</view>
	</view>
</template>

<script>
	import vvSelect from '@/pages/components/vv-select/vv-select.vue'
	export default {
		data() {
			return {
				image: this.$base.smallimgUrl,
				total:'',
				tabCurrent: 0,
				page: 1,
				list: [],
				isText: '',
				params: {
					year: true,
					month: true,
				},
				nowTime:'',
				show: false,
				beginTime:'',
				allType:[
					{
						name:'积分',
						id:'POINT'
					},
					{
						name:'佣金',
						id:'COMMISSION'
					}
				],
				withdrawalSource:'',
				date:new Date(Number(new Date()))
			};
		},
		components: {
			vvSelect
		},
		onReady() {
			var len = Number(new Date()).toString().length;
			if(len < 13) {
				var sub = 13 - len;
				sub = Math.pow(10,sub);
				this.date = new Date(Number(new Date()) * sub);
			}
			var y = this.date.getFullYear() + '-';
			var M = this.date.getMonth() + 1;
			M = (M < 10 ? '0' + M : M);
			this.nowTime = y + M + "-01 00:00:00"
			console.log(this.nowTime,'this.Time')
		},
		onShow(){
			this.list = []
			this.page = 1
			this.isText = ''
			this.getOrderList()
		},
		methods: {
			tabChange(e){
				this.withdrawalSource = e
				this.list = []
				this.page = 1
				this.isText = ''
				this.getOrderList()
			},
			// 选择系列
			openCup(e){
				this.show = true
				this.beginTime = e.year + '-'+ e.month 
				this.list = []
				this.page = 1
				this.isText = ''
				this.getOrderList()
				console.log(this.beginTime,'eeeeeeeeeee')
				
				
			},
			//获取当前日期年月日函数
			getNowFormatDate() {
			  var date = new Date();
			  var seperator1 = "-";
			  var year = date.getFullYear();
			  var month = date.getMonth() + 1;
			  var strDate = date.getDate();
			  if (month >= 1 && month <= 9) {
				month = "0" + month;
			  }
			  if (strDate >= 0 && strDate <= 9) {
				strDate = "0" + strDate;
			  }
			  var currentdate = year + seperator1 + month;
			  return currentdate;
			},

			// 获取订单列表
			getOrderList(){
				let that = this
				// that.list = [{
				// 	goods_img:'/static/my/t2.png',
				// 	nickName:'sss',
				// 	status:1,
				// 	guige:'哈哈哈',
				// 	createTime:'2017-12-8',
				// 	actual_price:10
				// }]
				let begin = ''
				begin = that.beginTime ? that.beginTime + '-01' : ''
				that.$api.withdrawalList({
					page: that.page,
					withdrawalSource:that.withdrawalSource,
					createTime:begin,
				}).then(res => {
					res.data.rows.length == 0 ? that.isText = '暂无数据' : that.isText = ''
					that.list = that.list.concat(res.data.rows)
					this.total = res.data.total
					
					console.log(res.data,'that.list')
				})
			},
			// 点击提货
			pickUpGoods(el){
				let that = this
				uni.showModal({
				 title:  "确定是否提货",
				 success: function (res) {
					  if (res.confirm) {
							that.$api.orderTh({
							 	order_number: el.order_number,
							}).then(res => {
							 	console.log(res)
								that.goDetails(el)
							})
					    } else{
							 console.log('用户点击取消');
					    }
					}
				});
				
			},
			// 点击回购
			buyBack(el){
				let that = this
				uni.showModal({
					 title:  "确定是否回购",
					 success: function (res) {
						if (res.confirm) {
							 console.log('用户点击确定');
							 that.$api.orderHg({
								order_number: el.order_number,
							 }).then(res => {
								console.log(res)
								that.goDetails(el)
							 }) 
						} else{
							 console.log('用户点击取消');
						}
					}
				});
			},
			
			// 跳转到详情页面
			goDetails(el){
				let res = {
					order_number: el.order_number,
					goods_img: el.goods_img,
					goods_name: el.goods_name
				}
				uni.navigateTo({
					url: '/pages/order/details/details?res=' + JSON.stringify(res)
				})
			}
		},
		onReachBottom() {
			let that = this
			if(that.isText == ''){
				that.page = that.page + 1
				that.getOrderList()
			}
		}
		
	}
</script>

<style lang="less">
	page{
		background-color: #f9f9f9;
	}
	.u-tab-bar{
		display: none !important;
	}
	.chooseCup {
		margin-right: 8rpx !important;
	
		image {
			width: 20rpx !important;
			height: 12rpx !important;
			margin: 14rpx;
		}
	}
	.order{
		width: 100vw;
		.tabBox{
			width: 100%;
			// height: 100rpx;
		}
		.listBox{
			width: 95%;
			margin: 30rpx auto;
			.list{
				width: 100%;
				height: auto;
				padding: 10rpx 24rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx auto;
				.code{
					color: #979797;
					font-weight: 400;
					font-size: 12px;
					line-height: 17px;
					margin-bottom: 10rpx;
				}
				.list_t{
					// border-top: 1px solid #F9F9F9;
					padding: 10rpx 0;
					image{
						width: 120rpx;
						height: 120rpx;
					}
					.list_t_r{
						width: 100%;
						.list_t_r_t{
							font-size: 28rpx;
							font-weight: 400;
							.name{
								margin-top: 6rpx;
								font-weight: 600;
							}
							.state{
								color: #7F8084;
							}
						}
						.specifications{
							font-size: 24rpx;
							font-weight: 400;
							color: #3DAD81;
							margin: 16rpx 0;
						}
						.time{
							font-size: 24rpx;
							font-weight: 400;
							color: #979797;
							margin: 20rpx 0;
						}
					}
				}
				
				.list_b{
					font-size: 28rpx;
					font-weight: 400;
					color: #7F8084;
					padding-top: 30rpx;
					.text{
						.money{
							display: inline-block;
							font-size: 32rpx;
							font-weight: 600;
							color: #000;
						}
					}
				}
				
				.btnBox{
					width: 100%;
					margin-top: 30rpx;
					flex-direction: row-reverse !important;
					.btn{
						width: 132rpx;
						height: 46rpx;
						line-height: 46rpx;
						border-radius: 46rpx;
						text-align: center;
						background-color: #000;
						color: #fff;
						font-size: 24rpx;
						font-weight: 500;
					}
				}
				
			}
		}
	}
</style>
